import React, {Component} from 'react';
// import classNames from 'classnames';
import './Tabs.scss';

import TabNav from './TabNav';

class Tabs extends Component {
  static defaultProps = {
    defaultActiveIndex: 0,
    onChange: () => {}
  }
  constructor (props) {
    super(props);
    const curProps = this.props;
    let activeIndex;
    if ('activeIndex' in curProps) {
      activeIndex = curProps.activeIndex;
    } else if ('defaultActiveIndex' in curProps) {
      activeIndex = curProps.defaultActiveIndex;
    }
    this.state = {
      activeIndex,
      prevIndex: activeIndex
    };
  }
  // 点击nav
  navClick (activeIndex) {
    let prevIndex = this.state.activeIndex;
    if (prevIndex === activeIndex) return false;
    this.setState({activeIndex, prevIndex});
  }
  // 渲染 nav
  renderTabNav () {
    const {className, children} = this.props;
    return (
      <TabNav
        classPrefix={className}
        activeIndex={this.state.activeIndex}
        panels={children}
        tabClick={this.navClick.bind(this)}
      ></TabNav>
    )
  }
  // 渲染 content

  render () {
    const {className} = this.props;
    return (
      <div className={className}>
        {this.renderTabNav()}
      </div>
    )
  }
}

export default Tabs;
